<template>
  <view class="my-shop-card"
        @click="$Router.push({path:`/pages/shop/shop?shopId=${shop.shop_id}`})">
    <!-- 图片 -->
    <view class="avatar">
      <u-avatar :src="shop.avatar_url"
                size="150"
                :show-level="shop.hot_number >= 2000"></u-avatar>
      <!-- <u-image width="100%" height="100%" :src="shop.avatar_url" shape="circle"></u-image> -->
    </view>
    <!-- 文字 -->
    <view class="info">
      <h3 class="title">{{ shop.shop_name }}</h3>
      <p class="sales">
        <u-icon name="star-fill"></u-icon>
        销量：{{ shop.hot_number }}
      </p>
      <p class="price">
        <u-icon color="#2b85e4"
                name="rmb-circle-fill"></u-icon>
        起送价：￥{{ shop.initial_price }}
      </p>
      <p class="adress">
        <u-icon color="#18b566"
                name="map-fill"></u-icon>
        定位：{{ shop.shop_floor }}
      </p>
    </view>
    <!-- 标签 -->
    <view class="tags">
      <u-tag :text="shop.delivery_method"
             :type="shop.delivery_method === '商家自送' ? 'primary' : 'success'"
             mode="light"
             shape="circleLeft" />
    </view>
  </view>
</template>

<script>
export default {
  name: 'MyShopCard',
  data() {
    return {}
  },
  props: {
    shop: Object,
  },
}
</script>

<style lang="scss" scoped>
// @mixin text-nowarp {
// 	white-space: nowrap;
// 	overflow: hidden;
// 	text-overflow: ellipsis;
// }
.my-shop-card {
  // background-color: pink;
  width: 100%;
  display: flex;
  align-items: center;
  color: $u-main-color;
}
.avatar {
  height: 200rpx;
  width: 200rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tags {
  width: 140rpx;
}
.info {
  height: 90%;
  // background-color: pink;
  margin: 0 20rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  p,
  h3 {
    width: 330rpx;
    font-size: 25rpx;
    @include text-nowarp;
    color: $u-tips-color;
  }
  .sales {
    color: $u-type-error-dark;
  }
  .title {
    font-weight: bolder;
    font-size: 35rpx;
    margin-bottom: 10rpx;
    display: flex;
    align-items: center;
    color: $u-main-color;
  }
}
</style>
